<template>
    <div>
        <div v-if="data.singleImg.using && !data.singleImg.src">
            <dont-choose-media/>
        </div>
        <div v-else-if="data.carousel.using && !data.carousel.src[0]">
            <dont-choose-media/>
        </div>
        <div v-else-if="data.video.using && !data.video.src">
            <dont-choose-media/>
        </div>
        <div v-else class="wraper">
            <div class="body">
                <!--单图片-->
                <div v-if="data.singleImg.using" class="single-img">
                    <img :src="data.singleImg.src" alt="img">
                </div>
                <!--轮播图-->
                <div v-else-if="data.carousel.using" class="carousel">
                    <img :src="data.carousel.src[0]">
                    <img
                            v-if="data.carousel.src.length>1"
                            :src="data.carousel.src[1]"
                            style="margin-left:3px;">
                </div>
                <!--视频-->
                <div v-else-if="data.video.using" class="video">
                    <video :src="data.video.src" id="previewVideo"></video>
                    <span v-show="!play" @click="playVideo" class="iconfont icon-play"></span>
                    <span  v-show="play" @click="pauseVideo" :class="[{show: play},'icon-pause','iconfont']"></span>
                </div>
            </div>
            <div class="footer">
                <span class="ad-title">{{adverTitle ||"标题"}}</span>
                <span v-if="data.singleImg.using" class="ad-url">{{data.singleImg.link ||"displayurl.com"}}</span>
                <span class="ad-content">{{data.adText||"动态消息描述"}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import { Carousel,CarouselItem } from 'element-ui'
    import { mapGetters, mapMutations ,mapActions} from 'vuex';
    import DontChooseMedia from '~components/ad-preview/dont-choose-media.vue'

    Vue.use(Carousel)
    Vue.use(CarouselItem)

    export default {
        components: {
            DontChooseMedia
        },
        props: {
            'data': {
                default: {}
            }
        },
        data (){
            return {
                play: false
            }
        },
        computed: {
            ...mapGetters([
                'adCreate'
            ]),
            adverText: function () {
                this.text = this.data.adText
                if (this.text.length > 70) {
                  this.seeMore = true;
                  return this.text.substring(0, 70)
                }else{
                    return this.text || ""
                }
            },
            adverTitle: function () {
                if(this.data.singleImg.using){
                    this.title = this.data.singleImg.title;
                }else if(this.data.carousel.using){
                    this.title = this.data.carousel.imageInfo[0].title;
                }else if(this.data.video.using){
                    this.title = this.data.video.title;
                }
                return this.title || "";
            }
        },
        methods: {
            playVideo(){
                let _this = this;
                let video = document.getElementById('previewVideo');
                video.play();
                this.play = true;
                video.addEventListener('ended',function () {
                    _this.play = false
                })
            },
            pauseVideo(){
                document.getElementById('previewVideo').pause();
                this.play = false
            }
        }
    }
</script>

<style lang="scss" scoped>
    *{
        box-sizing: border-box;
    }
    .wraper{
        overflow: hidden;
        position: relative;
        width: 274px;
        height: 216px;
        margin: 10px auto;
        padding:10px;
        background-color: #fff;
        word-wrap: break-word;
        color: #191919;
        font-family: Helvetica, Arial, Lucida Grande, sans-serif;
        font-size: 13px;
        line-height: 1.358;
    }
    .single-img{
        width: 250px;
        height: 135px;
        overflow: hidden;
        img{
            width: 250px;
            height: 135px;
        }
    }
    .video{
        width: 250px;
        height: 135px;
        overflow: hidden;
        position: relative;
        video{
            width: 250px;
            height: 135px;
        }
        .icon-pause,.icon-play{
            position:absolute;
            font-size: 50px;
            top:40px;
            left: 100px;
            color:#fff;
            cursor: pointer;
        }
        .hidden{
            display: none;
        }
        .icon-pause{
            display: none;
        }
        &:hover .icon-pause.show{
            display: inline-block;
         }

    }
    .carousel{
        width: 250px;
        height: 135px;
        img{
            width: 123px;
            height: 135px; 
            float: left;
        }
    }
    
    .footer{
        margin-top: 12px;
        position: relative;
        font-size: 13px;
        span{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            width: 100%;
            height: 14px;
            line-height: 14px;
        }
    }
    .ad-title{
        color: #365899;
        cursor: pointer;
        font-weight: bold;
    }
    .ad-url{
        color: #365899;
        cursor: pointer;
    }
    .ad-content{
        color: #90949c;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 13px;
    }

    
</style>
